<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 71 75"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path fill="#06F" d="M55.059 65.006H52.3c1.755-5.491 1.545-11.51-.589-16.838-2.133-5.327-6.03-9.564-10.902-11.852 4.872-2.288 8.769-6.525 10.902-11.853 2.134-5.327 2.344-11.346.59-16.837h2.758a1.6 1.6 0 0 0 1.184-.54c.314-.344.49-.812.49-1.3 0-.487-.176-.955-.49-1.3a1.601 1.601 0 0 0-1.184-.539H10.194c-.444 0-.87.194-1.184.539-.314.345-.49.813-.49 1.3 0 .488.176.956.49 1.301s.74.539 1.184.539h2.745c-1.755 5.491-1.544 11.51.59 16.837 2.133 5.328 6.03 9.565 10.901 11.853-4.87 2.288-8.768 6.525-10.902 11.852-2.133 5.328-2.344 11.347-.588 16.838h-2.68c-.444 0-.87.194-1.184.539-.314.345-.49.812-.49 1.3s.176.956.49 1.3a1.6 1.6 0 0 0 1.184.54h44.865c.444 0 .87-.195 1.184-.54.314-.344.49-.812.49-1.3s-.176-.955-.49-1.3a1.602 1.602 0 0 0-1.184-.539h-.067ZM44.144 26.223c-3.097 3.34-7.264 5.211-11.605 5.211-4.34 0-8.507-1.871-11.604-5.211h23.21Z"/><ellipse fill="#002F5C" ry="16.579" rx="17.75" cy="58.421" cx="53.25"/><path stroke-width="3" d="M53.673 52.895v6.316h6.34" data-follow-stroke="#fff" :stroke="_stroke"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Val2 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
